<template>
  <div class="app-container">
    <div id="container" style="width:100%;height:700px;" />
  </div>
</template>
<style>
</style>

<script>
import { listMap } from '@/api/brand'

export default {
  name: 'Map',
  data() {
    return {

    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
      // 设置地图中心点
      var myLatlng = new qq.maps.LatLng(28.226970, 113.020477)
      // 定义工厂模式函数
      var myOptions = {
        zoom: 7, // 设置地图缩放级别
        center: myLatlng, // 设置中心点样式
        mapTypeId: qq.maps.MapTypeId.ROADMAP // 设置地图样式详情参见MapType
      }
      // 获取dom元素添加地图信息
      var map = new qq.maps.Map(document.getElementById('container'), myOptions)
      listMap()
        .then(response => {
          var maplist = response.data.result.data
          var tmp = []
          maplist.forEach((ele, index) => {
            var thisLatlng = new qq.maps.LatLng(ele.location.lat, ele.location.lng)

            tmp[index] = new qq.maps.Marker({
              position: thisLatlng,
              map: map
            })
            tmp[index] = new qq.maps.Label({
              position: thisLatlng,
              map: map,
              offset: new qq.maps.Size(12, -30),
              content: ele.address
            })
          })
        }).catch((e) => {
          console.log('error')
          console.log(e)
        })
    }
  }
}
</script>
